<div class="col-md-12">
    <ul class="nav nav-tabs">
        <li [ngClass]="{'active' : tab === 'running'}" (click)="tab = 'running'"><a href="javascript:void(0)"><span>Running</span></a></li>
        <li [ngClass]="{'active' : tab === 'stats'}" (click)="tab = 'stats'"><a href="javascript:void(0)"><span>Stats</span></a></li>
    </ul>



    <div class="tab-content row">

        <div class="col-md-12">
            <form class="form-inline studio-well">
                <div class="form-group">
                    <label>Database </label>
                    <select id="databasesOnline" name="db" [(ngModel)]="database" class="form-control" data-placeholder="Pick a Server">
                        <option *ngFor="let db of databases" [value]="db">{{db}}</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="col-md-12">
            <br />
        </div>

        <running-query-profiler [database]="database" [server]="server" *ngIf="tab==='running'"></running-query-profiler>
        <query-stats [database]="database" [server]="server" *ngIf="tab==='stats'"></query-stats>
    </div>
</div>